<template>
  <div class="container">
    <div class="name">
      <el-form
        ref="form"
        label-position="left"
        label-width="100px"
        :rules="rules"
        :model="form"
        align="left"
      >
        <el-form-item label="规格名称：" prop="skuName">
          <el-input
            type="text"
            v-model="form.skuName"
            placeholder="请输入规格名称"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" class="add-btn" @click="addSku" style="margin-left: 100px"
        >增加商品规格</el-button
      >
    </div>

    <div class="sku-list">
      <div class="title" v-if="value.length">规格信息</div>
      <div class="sku-item" v-for="(item, index) in value" :key="index">
        <div class="sku-name">
            规格名称：{{ item.skuName }}
        </div>
       <div class="flex-y-center">
        <div class="input">
          <div class="label">价格：</div>
          <el-input placeholder="请输入价格" v-model="item.skuPrice"></el-input>
        </div>
        <div class="input">
          <div class="label">库存：</div>
          <el-input placeholder="请输入库存" v-model="item.skuStock"></el-input>
        </div>
        <i class="el-icon-delete" @click="delSku(index)"></i>
       </div>
      </div>
    </div>

    <el-button type="primary" class="submit-btn" @click="saveSku">保存</el-button>
  </div>
</template>

<script>
export default {
  name: "value",
  props: {
    from: "",
    value:{
      default: () => []
    }
  },
  data() {
    return {
      form: {
        skuName: "",
      },
      rules: {
        skuName: [{ required: true, message: "规格名称不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    addSku() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.value.unshift({
            skuName: this.form.skuName,
            skuPrice: "",
            skuStock: "",
          });
          this.$emit('input', this.value)
        }
      });
    },
    delSku(index){
      this.value.splice(index, 1)
      this.$emit('input', this.value)
    },
    saveSku() {
      for (const sku of this.value) {
        if(!sku.skuPrice){
          return this.$modal.msgError('价格不能为空');
        }
        if(!sku.skuStock){
          return this.$modal.msgError('库存呢不能为空');
        }
      }
      this.$emit('submit')
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 717px;
  margin: 0 auto 30px;
  background: #fff;
}

.name {
  padding: 60px 0 20px;
  width: 800px;
}

.add-btn {
  width: 200px;
  height: 50px;
  background: #fe5a13;
  border-radius: 6px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
}

::v-deep .el-form-item__label {
  line-height: 50px;
  font-size: 16px;
  width: 120px;
}

::v-deep .el-input__inner,
::v-deep .el-textarea__inner,
::v-deep .el-date-editor {
  width: 548px;
  height: 50px;
  font-size: 16px;
}

.sku-list {
  padding-top: 30px;
  width: 800px;

  .title {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .sku-item {
    padding: 30px 0;
    border-bottom: 1px solid #f7f7f7;

    .sku-name{
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        padding-bottom: 20px;
    }

    .input {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .label {
        color: #606266;
        font-size: 16px;
        flex-shrink: 0;
        margin-right: 16px;
      }
    }

    .el-icon-delete::before {
      font-size: 30px;
      cursor: pointer;
    }

    ::v-deep .el-input__inner {
      width: 223px;
    }
  }
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}
</style>
